<template>
  <div :class="['comment-item', { reply: isReply }]">
    <el-avatar :src="comment.user?.avatar || comment.avatar || defaultAvatar" :size="36" />
    <div class="comment-content">
      <div class="comment-header">
        <span class="comment-author">{{ comment.user?.name || comment.name || '匿名' }}</span>
        <span class="comment-time">{{ comment.createTime }}</span>
        <el-button v-if="canDelete" text type="danger" size="small" @click="handleDelete">删除</el-button>
      </div>
      <div class="comment-text">{{ comment.content }}</div>
      <div class="comment-actions">
        <el-button text type="primary" size="small" @click="showReply = !showReply">
          <el-icon><ChatLineRound /></el-icon> 回复
        </el-button>
      </div>
      <div v-if="showReply" class="reply-form">
        <el-input v-model="replyContent" type="textarea" :rows="2" placeholder="回复..." />
        <div class="form-footer">
          <el-button type="primary" size="small" @click="submitReply" :loading="replying">提交</el-button>
          <el-button size="small" @click="showReply = false">取消</el-button>
        </div>
      </div>
      <div class="replies-list" v-if="comment.replies && comment.replies.length">
        <CommentItem
          v-for="reply in comment.replies"
          :key="reply.id"
          :comment="reply"
          :current-user="currentUser"
          :on-reply="onReply"
          :on-delete="onDelete"
          :is-reply="true"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ChatLineRound } from '@element-plus/icons-vue';
const props = defineProps({
  comment: { type: Object, required: true },
  currentUser: { type: Object, required: true },
  onReply: { type: Function, required: true },
  onDelete: { type: Function, required: true },
  isReply: { type: Boolean, default: false }
});
const defaultAvatar = 'https://tourist-hz.oss-cn-beijing.aliyuncs.com/%E5%A4%B4%E5%83%8F';
const showReply = ref(false);
const replyContent = ref('');
const replying = ref(false);
const canDelete = props.currentUser && props.currentUser.id && props.comment.user && props.currentUser.id === props.comment.user.id;
const submitReply = async () => {
  if (!replyContent.value.trim()) {
    ElMessage.warning('请输入回复内容');
    return;
  }
  replying.value = true;
  try {
    await props.onReply(replyContent.value, props.comment.id);
    replyContent.value = '';
    showReply.value = false;
  } finally {
    replying.value = false;
  }
};
const handleDelete = async () => {
  await props.onDelete(props.comment.id);
};
</script>

<style scoped>
.comment-item {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid #f0f0f0;
  position: relative;
  transition: box-shadow 0.2s;
}
.comment-item.reply {
  background: #f8fafd;
  margin-left: 36px;
  border-left: 3px solid #36cfc9;
  box-shadow: none;
  border-radius: 8px;
  padding: 14px 16px;
}
.comment-content { flex: 1; }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.comment-author { font-weight: 500; }
.comment-time { font-size: 0.9rem; color: #888; }
.comment-text { margin: 0 0 8px; line-height: 1.7; }
.comment-actions { display: flex; gap: 10px; margin-bottom: 6px; }
.reply-form { margin-bottom: 8px; }
.form-footer { display: flex; gap: 10px; margin-top: 6px; }
.replies-list { margin-top: 6px; }
.el-button { font-size: 13px; }
</style> 